<template>
  <div class="home">
    <!--search  搜索 -->
    <!-- :container="container" -->
    <van-sticky class="rotation-search" ref="xxx" @scroll="onScroll">
      <!-- :class="[offsetTop ? 'bg-red' : 'bg-rgb0']" -->
      <van-row type="flex" justify="space-around" align="center" class="pa">
        <van-col><van-icon class-prefix="iconfont" name="gengduo" /></van-col>
        <van-col span="18" class="bg-white radius pa-min">
          <span>G</span>
          <span>&nbsp;|&nbsp;</span>
          <van-icon class-prefix="iconfont" name="wxbsousuotuiguang" />
          <input
            type="text"
            class="HomeInput"
            placeholder="一款彩色的陶瓷鸡摆件 颜色充满了阳光和热情。一款不可多得的摆件"
            v-model="value"
            autofocus
          />
        </van-col>
        <!-- <van-icon class-prefix="iconfont" name="gerenzhongxin" /> -->
        <van-col
          ><van-button type="info" to="logOn" size="small" color="#41473C"
            >登录</van-button
          ></van-col
        >
      </van-row></van-sticky
    >
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipes" :key="item.categoryId"
        ><img :src="item.imgUrl" alt=""
      /></van-swipe-item>
    </van-swipe>
    <!-- 首页 顶部分类 -->
    <van-grid column-num="5" square>
      <van-grid-item
        v-for="(item, value) in formIco"
        :key="value"
        :icon="item.imgUrl"
      >
        <template #text>
          <div>{{ item.name }}</div>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 商品内容(爱生活) -->
    <div v-for="(item, value) in floorlists" :key="value">
      <van-image width="100%" height="60" :src="item.headUrl" />
      <van-grid column-num="2" :center="true" square>
        <van-grid-item
          class="aishenghuo"
          v-for="(items, values) in item.list"
          :key="values"
        >
          <van-tag
            color="rgba(0,0,0,.0)"
            text-color="#000"
            plain
            size="large"
            >{{ items.desc }}</van-tag
          >
          <van-tag
            color="rgba(0,0,0,.0)"
            text-color="#000"
            :plain="true"
            size="medium"
            >{{ items.title }}</van-tag
          >
          <van-row>
            <van-col span="12" v-for="(ite, valu) in items.products" :key="valu"
              ><van-image :src="ite.imgUrl"
            /></van-col>
          </van-row>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- <div>
      <van-image
        width="100%"
        height="60"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <van-grid column-num="2" square>
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
        </van-grid-item>
      </van-grid>
    </div>
    <div>
      <div>首页</div>
      <slot>{{ user.lastName }}</slot>
    </div> -->
    <!-- tabbar -->
    <Tabbar />
  </div>
</template>

<script>
import Vue from 'vue';
import {
  Col,
  Row,
  Search,
  Icon,
  Swipe,
  SwipeItem,
  Sticky,
  Grid,
  GridItem,
  Image as VanImage,
  Tag,
  Button,
} from 'vant';
import { getSliders, homeCategory, homeFloorList } from '@/api/home';
import Tabbar from '@/components/tabbar.vue';

Vue.use(Button);
Vue.use(Col).use(Row);
Vue.use(Search);
Vue.use(Icon);
Vue.use(Swipe).use(SwipeItem);
Vue.use(Sticky);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(VanImage);
Vue.use(Tag);
export default {
  name: 'Home',
  components: {
    Tabbar,
  },
  data() {
    return {
      value: '',
      plain: true,
      swipes: [],
      user: {
        lastName: '你好!',
      },
      formIco: [],
      floorlists: [],
    };
  },
  methods: {
    onScroll(e) {
      const loc = this.$refs.xxx.$el.children[0].style.backgroundColor;
      if (e.scrollTop >= this.$refs.xxx.$el.offsetHeight && loc != 'rgb(255, 0, 0)') {
        this.$refs.xxx.$el.children[0].style.backgroundColor = 'rgb(255,0,0)';
      } else if (e.scrollTop < this.$refs.xxx.$el.offsetHeight && loc != 'rgba(0, 0, 0, 0)') {
        this.$refs.xxx.$el.children[0].style.backgroundColor = 'rgba(0,0,0,0)';
      } else {
      }
    },
  },
  created() {
    // 轮播
    getSliders((res) => {
      // console.log(res.data);
      this.swipes = res.data;
    });
    // 顶部分类图
    homeCategory((res) => {
      this.formIco = res.data;
      // console.log(this.formIco.imgUrl);
    });
    // 商品内容
    homeFloorList((res) => {
      this.floorlists = res.data;
    });
  },
  // mounted() {
  // this.container = this.$refs.container;
  // },
};
</script>
<style lang="scss">
.bg-red {
  background-color: red;
}
.co-red {
  color: red;
}
.bg-white {
  background-color: white;
}
.radius {
  border-radius: 8px;
}
.pa {
  padding: 15px;
}
.pa-min {
  padding: 8px;
}
.bg-rgb0 {
  background-color: rgba($color: #000000, $alpha: 0);
}
.rotation-search {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 99;
}
.my-swipe .van-swipe-item {
  color: #fff;
  background-color: #39a9ed;
  img {
    width: 100%;
    height: 218px;
    vertical-align: bottom;
  }
}
.aishenghuo {
  justify-content: start;
}
.HomeInput {
  border: none;
}
</style>
